<template>
	<view>
		<view class=" " v-for="(item, index) in detailData" :key="item.Id" style=" width: 93%;
		  margin: 0 auto;
		  box-shadow: 3px 4px 16px 0px #6b6b6a;
		  margin-top: 40rpx;
		  margin-bottom: 10px;
		  background-color: #ffffff;
		  border-radius: 10rpx;
		 padding: 20rpx;
		">
			<view class="flex Jbetween" style="font-size: 14px">
				<span class="font">开始日期: {{ item.DepartureDate || "无" }}</span>
				<span class="font">上下午: {{ item.DepartureAMPM || "无" }}</span>
			</view>
			<view class="flex Jbetween" style="font-size: 14px">
				<span class="font">结束日期: {{ item.ArrivalDate || "无" }}</span>
				<span class="font">上下午: {{ item.ArrivalAMPM || "无" }}</span>
			</view>
			<view class="flex Jbetween" style="font-size: 14px">
				<span class="font">出差天数: {{ item.TravelDays || "无" }}</span>
				<span class="font">补贴基数: {{ item.SubsidyBase || "无" }}</span>
			</view>
			<view class="flex Jbetween" style="font-size: 14px">
				<span class="font">出差补贴: {{ item.TravelAllowance || "无" }}</span>
				<span class="font">摘要: {{ item.Remark || "无" }}</span>
			</view>
			<!-- 暂时不打开 后续根据需求打开 -->
			<!-- 	<view class="flex Jbetween" style="font-size: 14px">
				<span class="font">附件: {{ item.ExpenseType || "附件" }}</span>
			</view> -->
			<view class="flex Jend">
				<view @click="handleDelete([item.Id], index)" style="
		      width: 15%;
		      border-radius: 5px;
		      line-height: 30px;
		      color: #fff;
		      text-align: center;
		      background-color: red;
			  margin-top: 10rpx;
		    ">
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 明细表
				detailData: [{
					CustomName: '客户名称',
					ExpenseType: '业务性质',
					BillType: '票据类型',
					InvoiceClassification: '发票分类',
					ItemAbstract: '摘要',
					FaceAmount: '票面金额',
					ReimburseAmount: '报销金额',
					BillsNum: 12,
					IsNoTicket: '是否无票支出'
				}]
			}
		}
	}
</script>

<style lang="less" scoped>
</style>